<template>
        <div>
           <el-header ><h3>我的小区</h3></el-header>
         
          <span v-if="display">请先选择小区，否则无法选则服务   <br><br></span>

    <el-table :row-class-name="tableRowClassName"
      :data="tableData"
      border
      style="width: auto">
      <el-table-column
        prop="name"
        label="小区名称"

        align="center">
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="小区介绍"

        align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="小区地址"

        align="center">
      </el-table-column>

      <el-table-column
        label="操作"

        align="center">
        <!-- slot-scope="scope" -->
        <template slot-scope="scope">
          <!-- type里的选项只是颜色 -->
          <!-- 这些方法用于打开对话框，名字要和真正实现的方法，事件名区分 -->
          <el-button type="success" size="mini" @click="select(scope)">选择</el-button>

        </template>
      </el-table-column>
    </el-table>
    <br><br><br><br><br>
    <!-- 后台实体类增加一个int 状态码，记录默认地址，值等于小区id -->
    <span>已选择小区：</span><br>
    <table align="center">
      <tr height="50">
        <td width="100">小区名称:</td>
        <td width="180" id="name">{{this.community.name}}</td>
      </tr>
      <tr height="50">
        <td width="100">小区地址:</td>
        <td width="180" id="address">{{this.community.address}}</td>
      </tr>
    </table>

    </div>
</template>
<script>
export default {
         data() {
          return{
           tableData:[],
            community:{
            name:"",
            address:""
          },
          display:true
      }
    },
    methods:{
      tableRowClassName({row, rowIndex}) {
              if (rowIndex%2 === 1) {
                return 'warning-row';
              } else if (rowIndex%2 === 0) {
                return 'success-row';
              }
              return '';
            },
        select:function(scope){
             window.sessionStorage.setItem("cid",scope.row.id)
             window.sessionStorage.setItem("name",scope.row.name)
              window.sessionStorage.setItem("address",scope.row.address)
            console.log("存放小区id："+window.sessionStorage.getItem("cid"))
             this.community=scope.row
              this.display=false

        },
        cancel:function(scope){

        }
    },
     mounted(){
      this.$axios.get("http://localhost:8080/service/community/findAll").then(res =>{
         console.log(res.data)//ResponseResult
        console.log(res.data.data)
        this.tableData = res.data.data
      })
      if(window.sessionStorage.getItem("cid")!=null){
         //alert("cid="+window.sessionStorage.getItem("cid"))
       // this.$axios.get("http://localhost:8080/service/community/findById?id="+window.sessionStorage.getItem("cid")).then(res =>{
        //window.sessionStorage.setItem("community",res.data.data)
        console.log("加载")
       // console.log(res.data.data)
       this.community.name=window.sessionStorage.getItem("name")
       this.community.address=window.sessionStorage.getItem("address")
        this.display=false
       console.log(this.community.name+"缓存")
       this.user=window.sessionStorage.getItem("user")
       console.log()
       console.log(sessionStorage.getItem("user").username)


     // })
     }

    }
}
</script>
<style>
  .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
</style>
